<template>
	<div class="noticeMessage components-container">
	<el-row class="noticeMain">
   <el-col :span="4" class="noticeLeft">
    <el-menu
      class="el-menu-vertical-demo notice-menu"
      @open="handleOpen"
      @close="handleClose" background-color="#fff" text-color="#000" active-text-color="#409EFF" :default-active="defaultActive">
    
     <el-menu-item class="notice-item"  :index="String(index)" v-for="(item,index) in noticeList" :key="index" @click="queryMessage(item.code,item.title)">
      	   <span slot="title" >{{item.title}}</span>
            <el-badge :value="item.unreadMessageCount !== '0'? item.unreadMessageCount : ''"  :min='0' class="unreadCount">
            </el-badge>
       
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col :span="20" class="noticeRight">
  	  <el-menu  text-color="#000" v-loading="loading">
  	  <el-menu-item  :index="String(index)" v-for="(item,index) in messageList" @click="hasRead(item)" :key="index" class="message-item" >
              <div class="menu-item-wrapper" :class="{'unread-color':item.read===false,'read-color':item.read===true}">
                <div class="menu-item-header">
                  <span :class="{'red-point':item.read===false,'grey-point':item.read===true}"></span>
                  <span class="message-title">{{item.title}}</span>
                <span class="create-time">{{item.createdOn}}</span> 
                </div>
                <div class="content">{{item.content}}</div>
              </div>
          </el-menu-item>
  	 </el-menu> 
  	  
  </el-col>
  </el-row>
</div>
</template>
<script>
    import pages from '../../components/page/page'
    import * as api from '@/api/notice'
    import { mapActions } from 'vuex'
    export default {
      data() {
        return {
          loading: false,
          tabPosition: 'left',
          defaultActive: '0',
          noticeList: [],
          messageList: [],
          notificationCode: '',
          goUrl: []
        }
      },
      created() {
        this.queryNotice()
      },
      methods: {
        ...mapActions({
        $myUnreadMessage: 'myUnreadMessage'
        }),
        handleOpen() {},
        handleClose() {},
      	hasRead(item) {
          // 阅读状态置为已读
          api.markRead(item.id).then((res) => {
            if(+res.code === 0) {
              this.$myUnreadMessage()
              this.noticeList.forEach(x => {
                if (x.title === item.title && item.read === false) {
                  x.unreadMessageCount =x.unreadMessageCount - 1
                }
              })
              item.read = true
              if(!item.url) {
                return
              } else {
                this.$router.push({ name: item.url, params: { uuid: item.subject }})
              }
            }
          }).catch(err => {
            console.log(err.msg)
          })
      	},
      	queryNotice() {
      		api.myNoticeList().then((res) => {
      			if (+res.code === 0) {
      				this.noticeList = res.data
              if(this.noticeList.length > 0) {
                this.queryMessage(this.noticeList[0].code,this.noticeList[0].title)
              } else {
                this.$message({
                  message: '当前用户无任何通知',
                  type: 'warning',
                  showClose: true
                })
              }
      			}
      		})
      	},
      	queryMessage(notificationCode,title) {
          // 通过code在store的通知跳转映射表中找到对应的URL，然后赋在每个消息中
          this.loading = true
          this.$store.dispatch("getUrlByCode", notificationCode)
          console.log(this.$store.getters.url)
      		api.myMessageListByCode(notificationCode).then((res) => {
      			if (+res.code === 0) {
              let messageListTmp = res.data
              messageListTmp.forEach((item) => {
                item.title = title
                item.url = this.$store.getters.url
              })
      				this.messageList = messageListTmp
              this.loading = false
      			}
      		}).catch(err => {
            console.log(err)
            this.loading = false
          })
      	}
      },
      components: {
        pages
      }
    }
  </script>
<style  scoped lang="scss">
  .noticeMessage {
   .noticeMain {
  	 position: relative;
     height: 90%;
  	  .noticeLeft {
  	  	float: left;
  		  display: inline-block;
        width: 17.5%;
        .notice-menu {
          border-bottom: 1px solid rgb(204,204,204);
          .notice-item {
            text-align: left;
            overflow: hidden;
            border: 1px solid rgb(204,204,204);
            border-bottom-style: none;
            &:hover {
            background-color: #F2F6FC !important;
            }
            .unreadCount {
              float: right;
            }
          }
          .is-active {
            background-color: #F2F6FC !important;
            color: #f0f0f0;
            font-weight: bold;
          }
        }
  	  }
	   .noticeRight {
  	   	float: right;
    		display: inline-block;
    		border: 1px solid rgb(204,204,204);
    		height: 100%;
        width: 82.4%;
        overflow-y: auto; 
        overflow-x: hidden;
    		.el-menu-item {
      		position: relative;
      		background-color: #fff;
      		padding: 10px auto;
            .menu-item-wrapper {
              margin: 25px auto;
              padding: 5px auto;
              .menu-item-header {
                display: block;
                padding: 10px 0 20px 10px;
  		        .message-title {
                display: inline-block;
                float: left;
                margin-left: 10px;
          		 	line-height: 5px;
          		 	height: 5px;
                font-size: 14px;
      		    }
              .create-time {
                display: inline-block;
                float: right;
                line-height: 5px;
                height: 5px;
                font-size: 14px;
              }
              .red-point{
                position: relative;
                display: inline-block;
                float: left;
              }
              .red-point::before{
                content: " ";
                border: 6px solid #F56C6C;
                border-radius:6px;
                position: absolute;
                z-index: 1000;
                right: 0%;
                margin-right: -5px;
                margin-top: -5px;
              }
              .grey-point{
                position: relative;
                display: inline-block;
                float: left;
              }
              .grey-point::before{
                content: " ";
                border: 6px solid #909399;
                border-radius:6px;
                position: absolute;
                z-index: 1000;
                right: 0%;
                margin-right: -5px;
                margin-top: -5px;
              }
            }
    		    .content {
              display: block;
              padding: 0 20px;
      		 	  background-color: #F2F6FC;
              word-break:break-all;
              white-space:normal;
              line-height: 35px;
      		 	  font-size: 14px;
            }
    		  }
          .read-color {
            color: #909399;
          }
          .unreda-color {
            color: #303133;
          }
    	}
        .is-active {
          background-color: #fff !important;
          color: #000;
        }
	    }
  	}
  }
  .components-container {
    position: relative;
    height: 89vh;
  }

  .left-container {
    background-color: #F38181;
    height: 100%;
  }

  .right-container {
    background-color: #FCE38A;
    height: 200px;
  }

  .top-container {
    background-color: #FCE38A;
    width: 100%;
    height: 100%;
  }

  .bottom-container {
    width: 100%;
    background-color: #95E1D3;
    height: 100%;
  }
</style>
